<template>
  <div id="header">
    <el-row>
      <el-col :span="6" style="padding: 0 0 0 25px; color: #fff;">
        <a :href="urlHome" style="color: #fff; line-height: 60px; text-decoration: none;">Anim 管理控制台</a>
      </el-col>
      <el-col :span="18">
        <el-menu
          default-active="console"
          class="el-menu-demo"
          mode="horizontal"
          align="right"
          @select="handleSelectHeader"
          background-color="#252a2f"
          text-color="#fff"
          active-text-color="#fff"
        >
          <el-menu-item index="console">控制台</el-menu-item>
          <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项1</el-menu-item>
              <el-menu-item index="2-4-2">选项2</el-menu-item>
              <el-menu-item index="2-4-3">选项3</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="3" disabled>消息中心</el-menu-item>
          <el-menu-item index="4">
            <a href="https://www.ele.me" target="_blank">订单管理</a>
          </el-menu-item>
          <el-submenu index="5">
            <template slot="title">{{ username }}</template>
            <el-menu-item index="indexChangePwd">修改密码</el-menu-item>
            <el-menu-item index="indexLogout">退出</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import Vue from 'vue';

export default {
  name: 'AnimHeader',
  props: ['username', 'urlHome'],
  data() {
    return {}
  },
  methods: {
    handleSelectHeader(key, keyPath) {
      if (key === 'indexLogout') {
        this.$emit('logout')
      }
      if (key === 'indexChangePwd') {
        this.$emit('changePwd')
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
